<!-- 电站列表 -->
<template>
	<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
	<view class="container">
		<view class="bg-white">
			<uv-tabs :list="tabList" :current="current" @change="change" keyName="name" :scrollable="false"></uv-tabs>
		</view>
		<view class="orders-list d-flex flex-column w-100" style="padding: 20rpx; padding-bottom: 0;">
			<view v-for="item in stationList" :key="id" class="li">
				<view class="top">
					<view class="top-content">
						<view class="left">
							<view class="stationName">
								{{item.name}}
							</view>
							<view class="statusView">
								<view class="status1">
									<view class="com-state" v-if="item.communi == 0">
										<!-- <text class="iconfont icon-form_icon_normal" style="color: #00FF35;font-size: 18rpx;"></text> -->
										<image class="state" src="@/static/images/station/com-normal.svg"></image>
										<!-- 0:正常；1:部分离线  2:全部离线-->
										<text class="status-text1">通讯正常</text>
									</view>
									<view class="com-state" v-else-if="item.communi == 1">
										<!-- <text class="iconfont icon-form_icon_normal" style="color: #999999;font-size: 18rpx;"></text> -->
										<image class="state" src="@/static/images/station/partialOffline.svg"></image>
										<text class="status-text1">部分离线</text>
									</view>
									<view class="com-state" v-else-if="item.communi == 2">
										<!-- <text class="iconfont icon-form_icon_normal" style="color: #e24e4e;font-size: 18rpx;"></text> -->
										<image class="state" src="@/static/images/station/allOffline.svg"></image>
										<text class="status-text1">全部离线</text>
									</view>


								</view>
								<view class="status1">
									<!-- 0:告警；2:无告警 -->
									<view class="com-state" v-if="item.policeStatus == 2">
										<!-- <van-icon name="bulb-o" color="green" /> -->
										<image class="state" src="@/static/images/station/com-normal.svg"></image>
										<text>无报警</text>
									</view>
									<view class="com-state" v-else-if="item.policeStatus == 0">
										<!-- <van-icon name="bulb-o" color="red" /> -->
										<image class="state" src="@/static/images/station/alarm.svg"></image>
										<text>报警</text>
									</view>
								</view>
							</view>
						</view>
						<!-- 授权设置 -->
						<view class="status-collect">
							<view class="setting">

							</view>
						</view>

						<view class="check">
							<navigator style="display: flex;align-items: center;"
								:url="`/pages/components/pages/station/stationInner?name=${item.name}&id=${item.id}`">
								<view class="txt">查看</view>
								<view> > </view>
							</navigator>
						</view>
					</view>

				</view>
				<view class="bottom">
					<view class="bottom-list">
						<text>电站类型:</text>
						<text selectable v-if="item.dtype == 0">户用电站</text>
						<text selectable v-else-if="item.dtype == 1">集中式电站</text>
						<text selectable v-else-if="item.dtype == 2">分布式电站</text>
					</view>
					<view class="bottom-list">
						<text>装机容量(KW):</text>
						<text selectable v-if="item.installedCapacity == null">--</text>
						<text selectable v-else>{{item.installedCapacity}}</text>

					</view>
					<view class="bottom-list">
						<text>发电功率(KW):</text>

						<text selectable v-if="item.powerGeneration == null">--</text>
						<text selectable v-else>{{item.powerGeneration}}</text>
					</view>
					<view class="bottom-list">
						<text>累计发电量(KW):</text>

						<text selectable v-if="item.electricTotal == null">--</text>
						<text selectable v-else>{{item.electricTotal}}</text>
					</view>
					<view class="bottom-list">
						<text>累计收益(元):</text>
						<text selectable v-if="item.tprofit == null">--</text>
						<text selectable v-else>{{item.tprofit}}</text>
					</view>
				</view>
			</view>



			<!-- <view class="order-item" v-for="(item, index) in orders" :key="index" style="margin-bottom: 30rpx;" >
				<list-cell :hover="false">
					<view class="w-100 d-flex align-items-center">
						<view class="flex-fill d-flex flex-column">
							<view class="font-size-lg text-color-base" style="margin-bottom: 20rpx;">
								{{ item.shop.name }}
							</view>
							<view class="font-size-sm text-color-assist">消息名称：{{ item.numberId }}</view>
							<view class="font-size-sm text-color-assist">消息编号：{{ item.orderId }}</view>
							<view class="font-size-sm text-color-assist">消息时间：{{ formatDateTime(item.createTime)}}</view>
						</view>
						<view class="font-size-lg text-color-primary">
							{{ item.statusDto.title }}
						</view>
					</view>
				</list-cell>
				<list-cell :hover="false" last>
					<view class="w-100 d-flex flex-column">
						<view class="w-100 text-truncate font-size-lg text-color-base" style="margin-bottom: 20rpx;">
			
						</view>
						<view class="d-flex justify-content-between align-items-center" style="margin-bottom: 30rpx;">
				
							<view class="d-flex font-size-sm text-color-base align-items-center">

							</view>
						</view>
						<view class="d-flex align-items-center justify-content-end">
							<view>
								<button v-if="item.paid > 0 && item.status < 2 && item.refundStatus == 0" class="left-margin"  plain size="mini" @tap.stop="receive(item)">确认收到餐</button>
								<button class="left-margin"  plain size="mini" @tap="detail(item.orderId)">消息详情</button>
							</view>
						</view>
					</view>
				</list-cell>
			</view> -->
		</view>
		<uv-empty v-if="stationList.length == 0" mode="list"></uv-empty>
	</view>
</template>


<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad,
		onPullDownRefresh,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		formatDateTime,
		kmUnit
	} from '@/utils/util'
	import {
		orderGetOrders,
		orderReceive
	} from '@/api/order'
	import {
		reqStationList
	} from "@/api/model/photovoltaic"
	const main = useMainStore()
	const {
		isLogin
	} = storeToRefs(main)
	const title = ref('电站管理')

	const page = ref(1)
	const pageSize = ref(10)
	const orders = ref([])
	const type = ref(2)
	const tabList = ref([{
		type: 2,
		name: '分布式',
	}, {
		type: 1,
		name: '集中式',
	}, {
		type: 0,
		name: '户用式'
	}, ])
	const queryParams = ref({
		
			"isPagination": true,
			"pageNum": 1,
			"pageSize": 10,
			"queryObj": {
				"name": "",
				"communi": "",
				"policeStatus": "",
				"dtype": ""
			}
		
	})
	const stationList = ref([])
	const current = ref(0)
	

	const goodsNum = computed(() => { //计算单个饮品添加到购物车的数量
		return (goods) => {
			let num = 0;
			goods.forEach(good => num += parseInt(good.number))
			return num;
		}
	})
	onLoad(() => {
		// if(!isLogin.value) {
		// 	uni.navigateTo({url: '/pages/components/pages/login/login'})
		// }
		getOrders(false)
	})
	onPullDownRefresh(() => {
		getOrders(false)
	})
	onReachBottom(() => {
		getOrders(false)
	})

	// tab栏切换
	const change = (e) => {
		//console.log('e;',e.type)
		//console.log('e.index;',e.index)
		type.value = e.type
		getOrders(true)
	}

	const getOrders = async (isRefresh = false) => {
		uni.showLoading({
			title: '加载中'
		})
		if (isRefresh) {
			stationList.value = []
			page.value = 1
		}

		queryParams.value.pageNum = page.value
		queryParams.value.pageSize = pageSize.value
		queryParams.value.queryObj.dtype = type.value
		let ordersData = await reqStationList(queryParams.value);

		if (ordersData.data.data && ordersData.data.data.list.length > 0) {
			stationList.value = stationList.value.concat(ordersData.data.data.list)

			page.value += 1
		}
		uni.stopPullDownRefresh();
		uni.hideLoading()
	}
	const detail = (id) => {
		uni.navigateTo({
			url: '/pages/components/pages/orders/detail?id=' + id
		})
	}
	// 确认收到货
	const receive = async (order) => {
		let data = await orderReceive({
			uni: order.orderId
		});
		if (data) {
			await getOrders(true)
		}
	}
</script>

<style lang="scss" scoped>
	.left-margin {
		margin-left: 10rpx;
	}

	.container {
		.orders-list {
			.li {
				height: 458rpx;
				margin-bottom: 20rpx;
				padding: 10rpx 14rpx 12rpx 18rpx;
				background-color: #fff;

				.top {
					height: 108rpx;
					width: 100%;

					.top-content {
						display: flex;
						flex: 1;
						justify-content: space-between;
						border-bottom: 1px solid #d9d9d9;

						.status-collect {
							flex: 3;

							.setting {
								width: 105rpx;
								height: 28rpx;
								font-size: 20rpx;
								margin-left: 13rpx;
								margin-top: 18rpx;
								margin-bottom: 7rpx;
								display: flex;
								font-family: PingFangSC-Regular, PingFang SC;
								font-weight: 400;
								color: #666666;
							}
						}

						.check {
							flex: 1;
							line-height: 85rpx;
							font-size: 28rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #75B2EB;

							::v-deep {
								.navigator-wrap {
									display: flex;
								}
							}


							.txt {
								margin-right: 10rpx;
							}
						}

					}

					.upload {
						.img {
							width: 80rpx;
							height: 80rpx;
							padding-left: 20rpx;
							font-size: 24rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: rgba(0, 0, 0, 0.65);
							line-height: 44rpx;
						}
					}

					.left {
						.stationName {
							flex: 1;
							min-width: 99rpx;
							height: 50rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 28rpx;
							margin-left: 12rpx;
							font-family: PingFangSC-Semibold, PingFang SC;
							font-weight: 600;
							color: #333333;
							line-height: 75rpx;
						}

						.statusView {
							display: flex;
							margin: 8rpx 0 20rpx 0;
						}

						.status1 {

							width: 105rpx;
							height: 28rpx;
							font-size: 20rpx;
							margin-left: 13rpx;
							font-family: PingFangSC-Regular, PingFang SC;
							font-weight: 400;
							color: #666666;

							.com-state {
								display: flex;
								align-items: center;
							}

							.state {
								width: 20rpx;
								height: 20rpx;
								background-size: 100%;
							}
						}
					}
				}

				.bottom {
					height: 350rpx;
					margin-top: 24rpx;
					width: 100%;

					.bottom-list {
						padding: 0 11rpx;
						margin-bottom: 22rpx;
						height: 40rpx;
						font-size: 28rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #666666;
						line-height: 40rpx;
						display: flex;
						justify-content: space-between;
					}
				}
			}

		}
	}
</style>